<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Login and Register App</title>
    <!-- 引入 Vue 2.6.14，这里使用 CDN 示例，你也可以使用本地文件 -->
<!--    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>-->
<!--    &lt;!&ndash; 引入 Vue Router，同样可根据实际情况选择 CDN 或本地文件 &ndash;&gt;-->
<!--    <script src="https://cdn.jsdelivr.net/npm/vue-router@3.5.3/dist/vue-router.js"></script>-->
<!--    <script src="https://cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js"></script>-->
    <script src="js/vue.2.6.14.js"></script>
    <script src="js/vue-router.js"></script>
    <script src="js/axios.min.js"></script>
</head>

<body>
<div id="app">
    <router-view></router-view>
</div>
<script>
    // 定义登录组件
    const LoginComponent = {
        template: `
                <div>
                    <h2>登录</h2>
                    <form @submit.prevent="login">
                        <input type="text" v-model="username" placeholder="用户名"><br>
                        <input type="password" v-model="password" placeholder="密码"><br>
                        <button type="submit">登录</button>
                    </form>
                    <div v-if="errorMessage">{{ errorMessage }}</div>
                </div>
            `,
        data() {
            return {
                username: '',
                password: '',
                errorMessage: ''
            };
        },
        methods: {
            async login() {
                try {
                    // 使用axios发送POST请求到后端登录接口
                    const response = await axios({
                        method: 'POST',
                        url: '/loginRegister/login',
                        data: {
                            username: this.username,
                            password: this.password
                        },
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    });
                    const result = response.data;
                    if (result.success) {
                        // 登录成功后的逻辑，比如跳转到用户主页（这里简化示例，暂未实际跳转）
                        console.log('登录成功');
                        this.$router.push('/user-home');
                    } else {
                        this.errorMessage = result.message;
                    }
                } catch (error) {
                    console.error('登录出错:', error);
                    this.errorMessage = '网络错误，请稍后重试';
                }
            }
        }
    };

    // 定义注册组件
    const RegisterComponent = {
        template: `
          <div>
            <h2>注册</h2>
            <form @submit.prevent="register">
              <input type="text" v-model="username" placeholder="用户名"><br>
              <input type="password" v-model="password" placeholder="密码"><br>
              <input type="email" v-model="email" placeholder="邮箱"><br>
              <button type="submit">注册</button>
            </form>
            <div v-if="errorMessage">{{ errorMessage }}</div>
          </div>
        `,
        data() {
            return {
                username: '',
                password: '',
                email: '',
                errorMessage: ''
            };
        },
        methods: {
            async register() {
                try {
                    // 使用axios发送POST请求到后端注册接口
                    const response = await axios({
                        method: 'POST',
                        url: '/loginRegister/register',
                        data: {
                            username: this.username,
                            password: this.username,
                            email: this.email
                        },
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    });
                    const result = response.data;
                    if (result.success) {
                        // 注册成功后逻辑，比如提示并跳转到登录页（简化示例未实际跳转）
                        console.log('注册成功');
                        this.$router.push('/login');
                    } else {
                        this.errorMessage = result.message;
                    }
                } catch (error) {
                    console.error('注册出错:', error);
                    this.errorMessage = '网络错误，请稍后重试';
                }
            }
        }
    };

    // 定义用户主页组件
    const UserHomeComponent = {
        template: `
            <div>
                <h2>欢迎来到主页</h2>
                <p>这里是用户登录后的主页内容哦，可以添加更多个性化展示等功能。</p>
            </div>
        `
    };

    // 配置路由
    const router = new VueRouter({
        routes: [
            { path: '/login', component: LoginComponent },
            { path: '/register', component: RegisterComponent },
            { path: '/user-home', component: UserHomeComponent },
            { path: '',redirect:'/login'}// 添加redirect属性，让应用初始加载时重定向到登录页面
        ]
    });

    // 创建 Vue 实例并挂载路由
    const app = new Vue({
        el: '#app',
        router:router
    });
</script>
</body>

</html>